<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="img in slideshow.images" :key="img.slwCode">
        <img :src="img.slwPath" width="100%">
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
<!--    <div class="swiper-button-prev"></div>-->
<!--    <div class="swiper-button-next"></div>-->
  </div>
</template>

<script>
import Swiper from "swiper";
import 'swiper/css/swiper.min.css'
import {SlideshowImages} from "@/api";
export default {
  name: "Slideshow",
  data(){
    return{
      slideshow: {
        images: []
      },
    }
  },
  created() {
    // 获取轮播图
    SlideshowImages().then(res => {
      this.slideshow.images = res
    })
  },
  updated() {
    new Swiper ('.swiper-container', {
      // direction: 'vertical', // 垂直切换选项
      autoplay: true,
      loop: true, // 循环模式选项
      delay: 1000,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
    })
  }
}
</script>

<style scoped lang="less">
.swiper-container{
  width: 80%;
  max-width: 800px;
  height: auto;
  image{
    max-width: 400px;
  }
}
</style>